var editortemplatepath = GetRootPath() + 'component/commonwebeditor/template.html';
Vue.use(window.VueQuillEditor)
var Quill = window.VueQuillEditor.Quill
//个性化字号
var Size = Quill.import('attributors/style/size');
var customSizeList = ['10px', '11px', '12px', '14px', '16px', '18px', '20px', '24px'];
Size.whitelist = customSizeList;
Quill.register(Size, true);
//个性化字体
var customFontList = ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial'];
var Font = Quill.import('formats/font');
Font.whitelist = customFontList; //将字体加入到白名单 
Quill.register(Font, true);

const toolbarOptions = [
    //字体
    [{
        font: customFontList
    }],
    //字号
    [{
        size: customSizeList
    }],

    ["bold", "italic", "underline"], // ["bold", "italic", "underline"]加粗bold 斜体italic 下划线underline 删除线strike
    // ["blockquote", "code-block"]blockquote引用  code代码块
    // header: 1 header: 2  1、2 级标题
    //list: "ordered" list: "bullet" 有序、无序列表
    //script: "sub"  script: "super" 上标/下标
    //  indent: "-1" indent: "+1" 缩进
    // [{'direction': 'rtl'}],                         // 文本方向
    //  size: ["small", false, "large", "huge"] 字体大小
    // header: [1, 2, 3, 4, 5, 6, false] 标题
    //颜色
    [{
        color: []
    }], // color: []  background: [] 字体颜色、字体背景颜色
    //对其方式
    [{
        align: []
    }], // 对齐方式
    // ["clean"]清除文本格式
    ["link"] // ["link", "image", "video"] 链接、图片、视频
]
Vue.component('common-webeditor', function(resolve, reject) {
    $.get(editortemplatepath).then(function(res) {
        resolve({
            template: res,
            model: {
                prop: 'value', //要存在于props
                event: 'change' //当组件的值发生改变时要emit的事件名
            },
            props: {
                value: {},
                editorwidth: {
                    default: 'auto'
                },
                readonly: {
                    default: false
                }
            },

            data() {
                return {
                    editorID: getNewGuid(),
                    editorImageStoreGroupType: "edtior",
                    editWidthConvert: this.editorwidth,
                    editContent: this.value,
                    editorOption: {},
                }
            },
            watch: {
                //组件输入同步到页面绑定的变量
                editContent: function(newVal, oldVal) {
                    this.$emit('change', newVal)
                },
                //页面变量同步到组件显示
                value: function(newVal, oldVal) {
                    this.editContent = newVal;
                },
                readonly: {
                    handler(val) {
                        if (val) {
                            this.$nextTick(function() {
                                $(".ql-formats").hide();
                            })
                        } else {
                            this.$nextTick(function() {
                                $(".ql-formats").show();
                            })
                        }
                    },
                    immediate: true
                }
            },
            created() {
                var page = this;
                this.editorOption = {
                    theme: 'snow', // or 'bubble'
                    placeholder: '编辑内容',
                    handlers: {
                        image: function(value) {
                            document.getElementById(page.$refs.webeditor.getUploadBtnID()).click();
                        }
                    },
                    modules: {
                        toolbar: {
                            container: toolbarOptions,
                            handlers: {
                                'image': function(value) {
                                    document.getElementById(page.$refs.webeditor.getUploadBtnID()).click();
                                }
                            }
                        }
                    },
                }
            },
            mounted() {
                if (this.editWidthConvert != "auto") {
                    this.editWidthConvert = this.editWidthConvert + 'px'
                }
            },
            methods: {
                // uploadImageSuccess(url, attguid) {
                //     var quill = this.$refs.hpWebEditor.quill;
                //     // 获取光标所在位置
                //     var length = quill.getSelection().index;
                //     // 插入图片
                //     var imageUrl = apiFrameUrl + "/ZhaoTouBiao/WebsitePublic.ashx?method=ReadAlOSS&ag=" + attguid;
                //     quill.insertEmbed(length, 'image', imageUrl)
                //     // 调整光标到最后
                //     quill.setSelection(length + 1)
                // }
            },

        })
    });
});
